import './diy.css'

import React, { Component } from 'react'
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

export default class TabsCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sleId: 'all'
    }
  }
  renderTabs() {
    let tabs = []
    let Comp = this.props.comp
    this.props.menu.map(item => {
      let id = this.props.type + "_" + item.id
      tabs.push(
        <TabPane tab={item.name} key={id}>
          <Comp {...this.props} parent={item.id}/>
        </TabPane>
      )
    })
    return tabs
  }

  callback(v) {
    this.props.callback(v)
  }

  renderSysTabs() {
    return (
    <Tabs defaultActiveKey={(this.props.type + '_all')} onChange={this.callback.bind(this)} className={this.props.nocenter? 'tabsLeft' : 'tabsCenter'}>
      {this.renderTabs()}
    </Tabs>)
  }

  changeTabs(id) {
    this.setState({
      sleId: id
    }, ()=> this.props.callback(this.props.type + '_' + id))
  }

  renderMenu() {
    let arr = []
    this.props.menu.map(item => {
      arr.push(
      <li key={item.id} className={item.id === this.state.sleId ? 'active': ''} onClick={this.changeTabs.bind(this, item.id)}>{item.name}</li>
      )
    })
    return arr
  }

  renderDiyTabs() {
    let Comp = this.props.comp
    return (<div style={{marginBottom: '50px'}}>
      <div className="tabs-wrapper clearfix">
        <span>{this.props.title}</span>
        <ul className="diy-tabs">
          {this.renderMenu()}
        </ul>
      </div>
      <div className="clearfix">
        <Comp {...this.props} parent={this.state.sleId}/>
      </div>
    </div>)
  }

  render() {
    return (
      <div>
        {this.props.title ? this.renderDiyTabs() : this.renderSysTabs()}
      </div>
    )
  }
}